<script setup>
import { ref, onMounted } from "vue";
import { getFloorGuideImage } from "@/api/external";

const floorGuideUrl = ref("");
const loading = ref(false);
const error = ref("");
const showFullscreen = ref(false);

// 获取楼层导览图片
const fetchFloorGuide = async () => {
  try {
    loading.value = true;
    error.value = "";
    const response = await getFloorGuideImage();

    if (response.floor_guide_image) {
      floorGuideUrl.value = response.floor_guide_image;
    } else {
      error.value = "暂无楼层导览图片";
    }
  } catch (err) {
    console.error("获取楼层导览图片失败:", err);
    error.value = "获取楼层导览图片失败";
  } finally {
    loading.value = false;
  }
};

// 打开全屏查看
const openFullscreen = () => {
  if (floorGuideUrl.value && !error.value && !loading.value) {
    showFullscreen.value = true;
  }
};

// 关闭全屏
const closeFullscreen = () => {
  showFullscreen.value = false;
};

onMounted(() => {
  fetchFloorGuide();
});
</script>

<template>
  <div class="floor-guide">
    <div class="subhead">
      <div class="text">楼层导览</div>
    </div>
    <!-- 图片占位区域 -->
    <div class="image-placeholder">
      <!-- 加载中状态 -->
      <div v-if="loading" class="loading-state">
        <div class="loading-spinner"></div>
        <div class="loading-text">加载中...</div>
      </div>

      <!-- 错误状态 -->
      <div v-else-if="error" class="error-state">
        <div class="error-icon">⚠</div>
        <div class="error-text">{{ error }}</div>
      </div>

      <!-- 图片显示 -->
      <img
        v-else-if="floorGuideUrl"
        :src="floorGuideUrl"
        alt="楼层导览图"
        class="placeholder-img clickable"
        @click="openFullscreen"
        @error="error = '图片加载失败'"
      />

      <!-- 默认占位图 -->
      <img
        v-else
        src="/src/assets/images/floor.png"
        alt="楼层导览图"
        class="placeholder-img"
      />
    </div>

    <!-- 全屏查看弹窗 -->
    <Transition name="fullscreen">
      <div
        v-if="showFullscreen"
        class="fullscreen-modal"
        @click="closeFullscreen"
      >
        <div class="fullscreen-content" @click.stop>
          <img :src="floorGuideUrl" alt="楼层导览图" class="fullscreen-img" />
          <button class="close-btn" @click="closeFullscreen">
            <span>✕</span>
          </button>
        </div>
      </div>
    </Transition>
  </div>
</template>

<style lang="scss" scoped>
.floor-guide {
  .image-placeholder {
    margin-top: 20px;
    width: 100%;
    height: 270px;
    background: linear-gradient(
      135deg,
      rgba(49, 190, 255, 0.08) 0%,
      rgba(49, 190, 255, 0.03) 100%
    );
    border: 1px solid rgba(49, 190, 255, 0.25);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;

    &:hover {
      border-color: rgba(49, 190, 255, 0.4);
      box-shadow: 0 4px 12px rgba(49, 190, 255, 0.2);
    }

    .placeholder-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.8;
      transition: all 0.3s ease;

      &.clickable {
        cursor: pointer;

        &:hover {
          opacity: 1;
          transform: scale(1.05);
        }
      }

      &:hover {
        opacity: 1;
      }
    }

    /* 加载状态 */
    .loading-state,
    .error-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .loading-spinner {
      width: 40px;
      height: 40px;
      border: 3px solid rgba(49, 190, 255, 0.2);
      border-top-color: #31beff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .loading-text,
    .error-text {
      color: rgba(246, 249, 254, 0.6);
      font-size: 14px;
      font-weight: 500;
    }

    .error-icon {
      font-size: 32px;
      color: rgba(255, 193, 7, 0.8);
    }

    .error-text {
      color: rgba(255, 193, 7, 0.8);
    }
  }

  /* 全屏弹窗样式 */
  .fullscreen-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: zoom-out;
  }

  .fullscreen-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
  }

  .fullscreen-img {
    max-width: 100%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  }

  .close-btn {
    position: absolute;
    top: -50px;
    right: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);

    &:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: rotate(90deg);
    }

    span {
      line-height: 1;
    }
  }

  /* 全屏弹窗动画 */
  .fullscreen-enter-active,
  .fullscreen-leave-active {
    transition: opacity 0.3s ease;

    .fullscreen-content {
      transition: transform 0.3s ease;
    }
  }

  .fullscreen-enter-from,
  .fullscreen-leave-to {
    opacity: 0;

    .fullscreen-content {
      transform: scale(0.8);
    }
  }
}
</style>
